import React from "react";

const FlexDemo: React.FC = () => {
  return (
    <div className="space-y-4">
      {" "}
      {/* 在垂直方向上（y 轴）为子元素之间添加间距 16像素(1个h,4个div)*/}
      <h1 className="text-2xl font-bold mb-4">Tailwind CSS Flex Layout Demo</h1>
      {/* Basic Flex Container */}
      <div className="mb-8">
        {" "}
        {/*这里的mb-8是这个div与下面div的间距 32px, 并没有生效是因为 space-y-4覆盖了这个mb-8*/}
        <h2 className="text-xl font-semibold mb-2">Basic Flex Container</h2>{" "}
        {/*这里的mb-2是这个h2与下面div的间距 8px*/}
        <div className="flex bg-yellow-200 p-4">
          {" "}
          {/*p4是上下左右的边距, flex是控制 下面三个div关系的 */}
          <div className="bg-blue-500 text-white p-4 m-2">Item 1</div>
          <div className="bg-green-500 text-white p-4 m-2">Item 2</div>
          <div className="bg-red-500 text-white p-4 m-2">Item 3</div>
        </div>
      </div>
      {/* Flex Direction */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold mb-2">Flex Direction: Column</h2>
        <div className="flex flex-col bg-gray-200 p-4">
          {" "}
          {/*flex-col是控制下面三个div关系的 col是 纵行*/}
          <div className="bg-blue-500 text-white p-4 m-2">Item 1</div>
          <div className="bg-green-500 text-white p-4 m-2">Item 2</div>
          <div className="bg-red-500 text-white p-4 m-2">Item 3</div>
        </div>
      </div>
      {/* Justify Content */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold mb-2">
          Justify Content: Space Between
        </h2>
        <div className="flex justify-between  bg-gray-200 p-4">
          <div className="bg-blue-500 text-white p-4">Item 1</div>
          <div className="bg-green-500 text-white p-4">Item 2</div>
          <div className="bg-red-500 text-white p-4">Item 3</div>
        </div>
      </div>
      {/* Align Items */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold mb-2">Align Items: Center</h2>
        <div
          className="flex items-center bg-gray-200 p-4"
          style={{ height: "200px" }}
        >
          <div className="bg-blue-500 text-white p-4">Short</div>
          <div className="bg-green-500 text-white p-8">Medium</div>
          <div className="bg-red-500 text-white p-12">Tall</div>
        </div>
      </div>
      {/* Flex Wrap */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold mb-2">Flex Wrap</h2>
        <div className="flex flex-wrap bg-gray-200 p-4">
          {" "}
          {/** 该换行就换行 */}
          {[...Array(8)].map((_, index) => (
            <div key={index} className="bg-purple-500 text-white p-4 m-2 w-1/4">
              Flex Item {index + 1}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default FlexDemo;
